리액트 기초반 [리액트 기초반] 3주차 - Switch로 잘못된 주소 처리하기 <Route>로 경로를 지정하지 않은 주소를 입력하면 사진처럼 아무런 내용도 뜨지 않는다. 주소에 해당되는 컨텐츠가 없기 때문이다. 이대로 사용시 사용자는 웹사이트가 문제라고 오해할 수도 있기 때문에 주소가 잘못되었다는 메시지를 띄워줘야 한다. App.js 우선 오류 화면을 띄울 NotFound.js 파일을 생성한다. App.js로 돌아와 기존에 만들어놨던 페이지 컴포넌트 아래에 <NotFo... React스파르타코딩클럽리액트 기초반RouteReact [리액트 기초반] 2주차 - CSS CSS 자체는 이미 알고 있는 내용이 많으므로, 헷갈리거나 몰랐던 개념 위주로 정리 예시 App.js sytle.css .App에서 display: flex를 빼면 사진처럼 상단은 background-color가 적용되지 않는다. <h1>의 display 속성이 block으로 설정 되어있기 때문이다. .App의 margin이 부모 요소의 margin처럼 보여지는 이 현상을 이라고 한다. 또한... ReactCSS리액트 기초반스파르타코딩클럽CSS [리액트 기초반] 2주차 - 컴포넌트 이 페이지는 <header>, <container>, <footer> 3개의 컴포넌트로 이루어져 있다. <container>는 다시 <image>와 <contents> 2개의 컴포넌트로 나뉜다. 컴포넌트 ∋ 컴포넌트 구조를 갖는 <container>는 <image>와 <contents>에게 각각의 데이터를 전달한다. 컴포넌트의 생애주기를 일목요연하게 보여주기 때문에 이후에 등장한 함수형 컴포... React스파르타코딩클럽리액트 기초반컴포넌트React [리액트 기초반] 3주차 - 리덕스 실전 ex) 버킷리스트용 action, actionCreator, reducer를 모두 한 파일에 넣음 액션 타입을 정해주는 부분 src/redux/modules/bucket.js 상위 폴더들을 만들고 modules 안에 bucket.js 파일을 생성한다. bucket.js 미들웨어(데이터를 외부에서 가져와야 하는 경우 데이터를 즉시 리듀서로 넘겨줄 수가 없기 때문에 대신 중간다리를 놓아주는 역할... 리액트 기초반reduxreac스파르타코딩클럽reac [리액트 기초반] 3주차 - 리덕스 이론 전역상태저장소(전역데이터저장소)로 스토어와 리듀서가 포함된다. 자식이 부모의 데이터를 관여하는 경우를 방지하기 위해 사용한다. 부모와 자식 어느곳에도 속하지 않는 별도의 전역상태저장소를 생성해서 그곳의 데이터를 부모와 자식이 사용하는 방식이다. ➊ 전역으로 누구나 볼 수 있는 데이터가 존재 ➋ 그 중에는 데이터를 참조하고 싶어하는 컴포넌트가 존재 ➌ ➋중에서 그 데이터를 수정하고자 하는 컴포... redux리액트 기초반스파르타코딩클럽ReactReact
[리액트 기초반] 3주차 - Switch로 잘못된 주소 처리하기 <Route>로 경로를 지정하지 않은 주소를 입력하면 사진처럼 아무런 내용도 뜨지 않는다. 주소에 해당되는 컨텐츠가 없기 때문이다. 이대로 사용시 사용자는 웹사이트가 문제라고 오해할 수도 있기 때문에 주소가 잘못되었다는 메시지를 띄워줘야 한다. App.js 우선 오류 화면을 띄울 NotFound.js 파일을 생성한다. App.js로 돌아와 기존에 만들어놨던 페이지 컴포넌트 아래에 <NotFo... React스파르타코딩클럽리액트 기초반RouteReact [리액트 기초반] 2주차 - CSS CSS 자체는 이미 알고 있는 내용이 많으므로, 헷갈리거나 몰랐던 개념 위주로 정리 예시 App.js sytle.css .App에서 display: flex를 빼면 사진처럼 상단은 background-color가 적용되지 않는다. <h1>의 display 속성이 block으로 설정 되어있기 때문이다. .App의 margin이 부모 요소의 margin처럼 보여지는 이 현상을 이라고 한다. 또한... ReactCSS리액트 기초반스파르타코딩클럽CSS [리액트 기초반] 2주차 - 컴포넌트 이 페이지는 <header>, <container>, <footer> 3개의 컴포넌트로 이루어져 있다. <container>는 다시 <image>와 <contents> 2개의 컴포넌트로 나뉜다. 컴포넌트 ∋ 컴포넌트 구조를 갖는 <container>는 <image>와 <contents>에게 각각의 데이터를 전달한다. 컴포넌트의 생애주기를 일목요연하게 보여주기 때문에 이후에 등장한 함수형 컴포... React스파르타코딩클럽리액트 기초반컴포넌트React [리액트 기초반] 3주차 - 리덕스 실전 ex) 버킷리스트용 action, actionCreator, reducer를 모두 한 파일에 넣음 액션 타입을 정해주는 부분 src/redux/modules/bucket.js 상위 폴더들을 만들고 modules 안에 bucket.js 파일을 생성한다. bucket.js 미들웨어(데이터를 외부에서 가져와야 하는 경우 데이터를 즉시 리듀서로 넘겨줄 수가 없기 때문에 대신 중간다리를 놓아주는 역할... 리액트 기초반reduxreac스파르타코딩클럽reac [리액트 기초반] 3주차 - 리덕스 이론 전역상태저장소(전역데이터저장소)로 스토어와 리듀서가 포함된다. 자식이 부모의 데이터를 관여하는 경우를 방지하기 위해 사용한다. 부모와 자식 어느곳에도 속하지 않는 별도의 전역상태저장소를 생성해서 그곳의 데이터를 부모와 자식이 사용하는 방식이다. ➊ 전역으로 누구나 볼 수 있는 데이터가 존재 ➋ 그 중에는 데이터를 참조하고 싶어하는 컴포넌트가 존재 ➌ ➋중에서 그 데이터를 수정하고자 하는 컴포... redux리액트 기초반스파르타코딩클럽ReactReact